<route lang="json5">
  {
    style: {
      navigationBarTitleText: '登录',
    },
  }
  </route>
<template>
  <view class="page">
    <view class="form-container">

      <view class="flex align-center justify-between">
        <view class="title">账号登录</view>
        <view class="register" @click="goRegister">没有账号,去注册</view>
      </view>

      <view class="form-item">
        <uni-icons type="person" size="20" color="#999" />
        <input type="text" v-model="formData.account" placeholder="请输入昵称或ID号" class="input" />
        <text class="tip-text">不能为纯数字</text>
      </view>




      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999" />
        <input :type="showPassword ? 'text' : 'password'" v-model="formData.password" placeholder="请输入密码"
          class="input" />
        <uni-icons :type="showPassword ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999"
          @click="togglePassword" />
      </view>

      <view class="flex align-center justify-between text-sm color-gray-500">
        <view class="forget-password" @click="goFindPassword">忘记密码?</view>
      </view>


      <button class="submit-btn" @click="handleSubmit">登录</button>

      <view class="agreement">
        <checkbox-group @change="handleCheckboxChange">
          <label class="checkbox-label">
            <checkbox :value="1" color="#FF6B44" :checked="formData.agreement"
              style="transform: scale(0.7); border-radius: 50%;" />
          </label>
        </checkbox-group>
        <text class="agreement-text">

          我已阅读并同意</text>
        <text class="agreement-link" @click="openPrivacyPolicy">《隐私政策》</text>
        <text class="agreement-text">和</text>
        <text class="agreement-link" @click="openUserAgreement">《用户协议》</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { navTo } from '@/utils/index'
import { postLoginAPI } from '@/service/index/index'
import { useUserStore } from '@/store'
import { ref, reactive, onMounted } from 'vue'

const showPassword = ref(false);
const showPayPassword = ref(false);
const openId = ref('');

const formData = ref<any>({
  account: '',
  password: '',
  mini_code: '',
  agreement: false,
});

const handleCheckboxChange = (e: any) => {
  console.log(e)
  if (e.detail.value.length > 0) {
    formData.value.agreement = true
  } else {
    formData.value.agreement = false
  }
}

const goBack = () => {
  uni.navigateBack();
};

const goLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  });
};

const goRegister = () => {
  uni.navigateTo({
    url: '/pages/login/reg'
  });
};

const goFindPassword = () => {
  uni.navigateTo({
    url: '/pages/login/find_pass'
  });
};

const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const togglePayPassword = () => {
  showPayPassword.value = !showPayPassword.value;
};

const handleSubmit = () => {
  if (!formData.value.agreement) {
    uni.showToast({
      title: '请阅读并同意用户协议',
      icon: 'none',
    })
    return
  }

  if (!formData.value.account) {
    uni.showToast({ title: '请输入昵称或ID号', icon: 'none' });
    return;
  }

  if (!formData.value.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' });
    return;
  }

  // Call the actual login function
  login();
};

const openPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages/login/privacy'
  });
};

const openUserAgreement = () => {
  uni.navigateTo({
    url: '/pages/login/agareement'
  });
};

// Define the expected response structure
interface LoginResponse {
  code: number
  data?: {
    userinfo?: any // Replace 'any' with the actual type if known
  }
}

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const wxlogin = async () => {
  uni.login({
    provider: 'weixin',
    success: function (loginRes) {
      console.log(loginRes)
      formData.value.mini_code = loginRes.code
      openId.value = loginRes.code
    },
  })
}

const login = () => {
  postLoginAPI({
    account: formData.value.account,
    password: formData.value.password,
    mini_code: openId.value,
  }).then((res: LoginResponse) => {
    if (res.code === 1) {
      uni.showToast({
        title: '登录成功',
        icon: 'none',
      })
      if (res.data && res.data.userinfo) {
        const userInfo = res.data.userinfo
        useUserStore().setUserInfo(userInfo)
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/my/index',
          })
        }, 1000)
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
    console.log(res)
  })
}

// #ifdef H5
onMounted(() => {
  wxlogin()
})
// #endif
// #ifdef MP-WEIXIN
onLoad((options) => {
  wxlogin()
})
// #endif
</script>

<style scoped>
page {
  height: 100%;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  text-align: left;
  margin-left: 10rpx;
  margin-bottom: 30rpx;
}

.page {
  min-height: 100%;
  background-color: #FFFFFF;
  padding: 0 30rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  margin: 0 -30rpx;
}

.nav-left {
  width: 100rpx;
  display: flex;
  align-items: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.nav-right {
  width: 100rpx;
  text-align: right;
  font-size: 14px;
  color: #FF6B44;
}

.form-container {
  padding-top: 60rpx;
}

.form-item {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  border: 1px solid #EEEEEE;
}

.input {
  flex: 1;
  height: 100%;
  margin-left: 20rpx;
  font-size: 14px;
}

.tip-text {
  font-size: 12px;
  color: #999999;
  margin: 0 20rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  margin-top: 60rpx;
  background: #1890ff;
  border-radius: 45rpx;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
}

.agreement {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  font-size: 20rpx;

}

.agreement-text {
  font-size: 12px;
  color: #999999;
}

.agreement-link {
  font-size: 12px;
  color: #1890ff;
}

.register {
  font-size: 28rpx;
  color: #1890ff;
  font-weight: 500;
}
</style>
